<template>
    <div v-if="userInf">
        <page-header backgroundColor="#fff" @toLastPage="toLastPage">
            <template v-slot:right >
                <span @click="toUserInfSet">
                    ...
                </span>
            </template>
        </page-header>
        <div class="userInf-wrapper flex van-hairline--bottom">
            <div class="left" @click="showImg">
                 <van-image
                width="2.5rem"
                height="2.5rem"
                radius=".2rem"
                fit="cover"
                :src="userInf.avatar"
            />
            </div>
            <div class="right f-col">
                <div class="name">
                    <span>{{userInf.beizhu?userInf.beizhu:userInf.nickname}}</span>
                    <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-nanxing"></use>
                    </svg>
                </div>
                <div class="nick" v-if="userInf.beizhu">昵称：{{userInf.nickname}}</div>
                <div class="weNum">微信号:{{userInf.weNum}}</div>
                <!-- <div class="address">地区:阿拉伯联合酋长国 沙迦</div> -->
            </div>
        </div>
        <!-- 功能列表 -->
        <div class="list" v-for="(item,index) in userCellList" :key="index">
            <cell-list :itemList="item" @sendEvent="sendEvent"></cell-list>
        </div>
        <!-- 操作 -->
        <!-- 好友 -->
        <div class="isfriend" v-if="isFriend && userId!==friendId">
            <div class="sendMsg van-hairline--bottom" @click="toChatDetail">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-liaotian"></use>
                    </svg>
                <span>发消息</span>
            </div>
        <div class="call" @click="phoneAndVideo">
            <svg class="icon" aria-hidden="true" >
                    <use xlink:href="#icon-yuyintonghua"></use>
                    </svg>
                <span>音视频通话</span>
        </div>
        </div>

        <!-- 非好友 -->
        <div class="nofriend" v-else-if="!isFriend && userId!==friendId">
            <div class="addToRecord" @click="toAddApply">
                添加到通讯录
            </div>
        </div>
    </div>
</template>
<script>
import pageHeader from '../common/pageHeader';
import cellList from '../common/cellList';
import {Meteor} from 'meteor/meteor';
import { image, user,friends } from '../../../api/collections/index';
import { ImagePreview } from 'vant';
export default {
    components:{
        pageHeader,
        cellList
    },
    meteor: {
    $subscribe: {
      'userInf': []
    },
    userInf(){
        const getUser = user.findOne({_id:this.friendId})
        if(this.userId == this.friendId){
            if(getUser){
                const avatar = image.findOne({_id:getUser.avatarId})
            getUser.beizhu = ''
        getUser.avatar = avatar.base64   
            }
        }
        else{
        const userInf = friends.findOne({F_UserID:this.userId,F_FriendID:this.friendId})
        if(getUser){
            const avatar = image.findOne({_id:getUser.avatarId})
            if(userInf){
                getUser.beizhu = userInf.F_beizhu
            }
        if(!getUser.weNum){
            Meteor.call('user.updateWeNum',{
                userId:this.friendId,
                weNum:'wxid_'+this.friendId
            })
        }
        getUser.avatar = avatar.base64   
        } 
        }                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    
        return  getUser
    },
    isFriend(){
        const isTrue = friends.findOne({F_UserID:this.userId,F_FriendID:this.friendId})
        if(isTrue || this.userId==this.friendId){
            return true
        }
        else{
            return false
        }
    }
    },
    watch:{
        isFriend(){
            // 判断是否为好友
            if(this.isFriend){
        this.userCellList=[ {
        separate:false,
         moreList:[
           {
            describe:'设置备注与标签',
            icon:'',
            content:'',
            color:'',
            event:'setBeizhu'
           },
           {
              describe:'朋友权限',
              icon:'',
              content:'',
              color:''
           }
         ]
        },
        {
        separate:false,
         moreList:[
           {
            describe:'朋友圈',
            icon:'',
            content:'',
            color:'',
            event:''
           },
           {
              describe:'更多信息',
              icon:'',
              content:'',
              color:''
           }
         ]
        }
        ]}
        else{
        this.userCellList=[ {
            separate:true,
            describe:'设置备注与标签',
            icon:'',
            content:'',
            color:'',
            event:'setBeizhu'
           },
            {
        separate:false,
         moreList:[
           {
            describe:'个性签名',
            icon:'',
            content:'',
            color:'',
            event:''
           },
           {
              describe:'来源',
              icon:'',
              content:'',
              color:''
           }
         ]
        }
        ]
        }

        }
    },
    data() {
        return {
            userCellList:[],
            userId:sessionStorage.getItem('user'),
            friendId:this.$route.params.id
        }
    },
    methods:{
        toLastPage(){
            this.$router.go(-1)
        },
        toAddApply(){
            this.$router.push('/addApply/'+this.$route.params.id)
        },
       sendEvent(e){
      switch(e){
          case 'setBeizhu':
              if(this.userId == this.friendId){
                  this.$notify({ type: 'warning', message: '当前账号为本人,暂无此操作',duration: 500 });
              }
              else{
                this.$router.push('/setRemarks/'+this.friendId);
              }
              
              break;
        default:this.$notify({ type: 'success', message: '功能暂未开发',duration: 500 });break;
      }
    },
    toUserInfSet(){
        if(this.isFriend && this.userId!==this.friendId){
            this.$router.push('/userInfSet/'+this.friendId)
        }
        else{
            if(!this.isFriend && this.userId!==this.friendId){
                return this.$toast('请先添加好友')
            }
            else{
                return this.$notify({ type: 'warning', message: '当前账号为本人,暂无此操作',duration: 500 });
            }
        }
            
    },
     showImg(){
      ImagePreview({
        images: [
            this.userInf.avatar
        ],
        showIndex:false
        });
    },
    toChatDetail(){
        this.$router.push('/chatPage/'+this.$route.params.id)
    },
    phoneAndVideo(){
        this.$notify({ type: 'success', message: '功能暂未开发',duration: 500 });
    }
    }
}
</script>
<style scoped>
.userInf-wrapper{
    padding: 3rem .5rem 1rem;
    background-color: #fff;
}
.left{
    width: 2.5rem;
    margin-right: .8rem;
}
.right{
    flex:1;
}
.name span{
    font-weight: 700;
    font-size: 1rem;
}
.name .icon{
    color: #4F9EF1;
    font-size: .8rem;
}
.nick,.weNum,.address{
    font-size: .6rem;
    color: #8D8D8D;
    margin-top: .3rem;
}
.sendMsg,.call,.addToRecord{
    text-align: center;
    padding-top: .2rem;
    font-size: .7rem;
    color: #566889;
    background-color: #fff;
    height: 2rem;
    line-height: 2rem;
}
.sendMsg:active,.call:active,.addToRecord:active{
    background-color: rgba(224,224,224,.5);
}
</style>